Welcome to your Free Training

Below you will find 5 videos walking you through code snippets I use on every Squarespace Website I build. Just follow along with the videos to copy, paste, and customize each piece of code.

Need Help?

Join my Private Facebook Group, Squarespace Tips & Tricks. This community of like-minded Squarespacers are always willing to help out!

 

  1. Remove Hyphens

Hyphens can make your text look messy. I use this code to remove the hyphens. 

h1, h2, h3, h4, p {
  hyphens: none;
}
 

2. Setting Up Your Colour Palette

The more and more code you add to your site, the more annoying it becomes to constantly look up the colour code for various colours in your palette. This code allows you to match each colour code to a word of your choosing. You can then use this word throughout your code instead. Can you say, time saver!!

Resource Mentioned: Canva Colour Palette Generator

/* Colour Palette */
@COLOURNAME : COLOURCODE;
 

3. Create a Cover Page or Landing Page

Cover Pages or Landing Pages are pages that do not show the header and footer. These are great for marketing purposes!

<style>
header, footer {
  display: none;
  }
</style>
 

4. Resize Images on Mobile

Squarespace automatically adjusts your site for Mobile. However, I always find I want the images a bit smaller or they take over the screen. 

@media only screen and (max-width:640px){
  .sqs-block-image {
    width: 80%;
    margin: 0 auto;  
  }
}
 

5. Add a Dropdown Box

FAQ pages and sections can be a great way to minimize the number of questions you get to your inbox. However, they can be messy and require a lot of scrolling for your visitors. Using dropboxes can be a great way to make these sections more functional.

PS: If you are using Squarespace 7.0, remember to have Ajax Loading turned off or the dropdown box will only work when the page is refreshed.

P.S.S: The code has been updated since the video was filmed so that is it compatible with the most recent version of JQuery.

Markdown Box

<div class="box">This is the question<span style="text-align:right; float: right;">&darr;</span> </div>
-------------------------

 > <p>*This is paragraph one of the answer.*</p>
> 
>  <p>*This is paragraph two of the answer.*</p>

</br>

CSS

.markdown-block h2{
  font-size: 22px;
  background: #000000;
  color: #FFFFFF;
}

.box {
  padding: 10px;
  outline: #000000 solid 3px;
  outline-offset: 3px;
  margin: auto 0px;
}

Javascript

In the Header

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

In the Footer

<script> 
 $(window).on('load', function () {
  $('.markdown-block .sqs-block-content h2').css('cursor','pointer');
  $(".markdown-block .sqs-block-content h2").nextUntil("h2").slideToggle(); 
  $(".markdown-block .sqs-block-content h2").click(function(){
    $(this).nextUntil("h2").slideToggle();
  });  
}); 
</script>
 
Encylopedia of Code for Squarespace.jpg

Encyclopedia of Code

Want access to more code snippets?

My Encyclopedia of Code is just for you! This resource library contains hundreds of copy and paste code snippets for all your Squarespace Customization needs.

Learn More

 © 2018 - 2022 Rebecca Grace Designs™ | Privacy Policy | Terms & Conditions

This is a tithing company. Therefore, 10% of all sales will be donated to various charities and non-profit organizations.